<template>
  <div class="flex flex-col gap-4">
    <div class="columns">
      <a-input-number :formatter="formatter" v-model.number="currentShape.x" size="mini">
        <template #prepend>
          <span class="text-[12px] text-gray-500">X</span>
        </template>
      </a-input-number>
      <a-input-number :formatter="formatter" v-model.number="currentShape.y" size="mini">
        <template #prepend>
          <span class="text-[12px] text-gray-500">Y</span>
        </template>
      </a-input-number>
      <a-input-number v-model="currentShape.w" :min="0" size="mini">
        <template #prepend>
          <span class="text-[12px] text-gray-500">W</span>
        </template>
      </a-input-number>
      <a-input-number v-model="currentShape.h" :min="0" size="mini">
        <template #prepend>
          <span class="text-[12px] text-gray-500">H</span>
        </template>
      </a-input-number>
      <a-input-number v-model="currentShape.z">
        <template #prepend>
          <span class="text-[12px] text-gray-500">Z</span>
        </template>
      </a-input-number>
      <a-input-number v-model="currentShape.rotate">
        <template #prepend>
          <span class="text-[12px] text-gray-500">R</span>
        </template>
      </a-input-number>
    </div>

    <div>
      <a-checkbox v-model="currentShape.lockAspectRatio">
        <span class="text-[12px] text-gray-500 text-nowrap">{{ t["宽高比"] }}</span>
      </a-checkbox>
      <a-checkbox v-model="currentShape.lock">
        <span class="text-[12px] text-gray-500">{{ t["禁用"] }}</span>
      </a-checkbox>
      <!-- <a-checkbox v-model="currentShape.resizable">
        <span class="text-[12px] text-gray-500">{{ t["缩放"] }}</span>
      </a-checkbox> -->
      <a-checkbox v-model="currentShape.draggable">
        <span class="text-[12px] text-gray-500">{{ t["拖拽"] }}</span>
      </a-checkbox>
      <a-checkbox v-model="currentShape.hasBorder">
        <span class="text-[12px] text-gray-500">{{ t["边框"] }}</span>
      </a-checkbox>
      <a-checkbox v-model="currentShape.parent">
        <span class="text-[12px] text-gray-500">{{ t["出界"] }}</span>
      </a-checkbox>
    </div>

    <div class="flex items-center gap-2">
      <div>
        {{ t["翻转"] }}
      </div>
      <Flip @change="flip" v-model="currentShape.rotate" />
    </div>
  </div>
  <!-- 
  <div>
      <a-button  :disabled="!enableUpdate">
        <IconRefresh />
        <span>{{ t["更新"] }}</span>
      </a-button> 
    </div>
  -->
</template>

<script setup lang="ts">
import Flip from "@/views/paint/components/Flip.vue";
import { currentShape } from "@/views/paint/modules/data/shapes";

const t = translate("公共模块");

const flip = (data: any) => {
  currentShape.value.flipX = data.flipX;
  currentShape.value.swap = data.swap;
  currentShape.value.rotate = data.rotate;
  // if (currentShape.value.rotate !== 0) {
  //   currentShape.value.parent = false;
  // }
};

const formatter = (value: string) => {
  return Number(value).toFixed(0);
};
</script>

<style lang="scss" scoped>
.check-box {
  width: 50%;
  flex-basis: 50%;
}

.columns {
  @apply grid grid-cols-2 grid-rows-2 gap-2;
}
</style>
